<template>
  <ul class="tab-bar">
    <li
      is="router-link"
      tag="li"
      v-for="nav in navs"
      :key="nav.path"
      :to="nav.path"
    >
      <i class="iconfont" v-html="nav.meta.icon"></i>
      <span>{{nav.meta.title}}</span>
    </li>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'Tabbar',
  computed: {
    navs () {
      return routes.filter(route => route.meta && route.meta.isTabbar)
    }
  }
}
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: 'iconfont';  /* project id 2084141 */
    src: url('//at.alicdn.com/t/font_2084141_57qn8luulrs.eot');
    src: url('//at.alicdn.com/t/font_2084141_57qn8luulrs.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2084141_57qn8luulrs.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2084141_57qn8luulrs.woff') format('woff'),
    url('//at.alicdn.com/t/font_2084141_57qn8luulrs.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2084141_57qn8luulrs.svg#iconfont') format('svg');
  }

  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  .tab-bar {
    display: flex;
    height: 54px;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      border-top: 1px solid #eaeaea;
    }
    .router-link-exact-active, .router-link-active {
      color: #f00;
    }
  }
</style>
